<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container p-5">
        <div class="">
          <div>
            <div style="margin: 0 auto; width: 40%">
              <el-card class="mt-5">
                <el-form
                  label-position="top"
                  label-width="100px"
                  :model="state.loginForm"
                >
                  <el-form-item label="账号">
                    <el-input
                      v-model="state.loginForm.username"
                      placeholder="请输入账号"
                    />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input
                      type="password"
                      show-password
                      placeholder="请输入密码"
                      v-model="state.loginForm.password"
                    />
                  </el-form-item>
                  <el-form-item label="">
                    <el-button @click="loginBtn" type="success" style="width: 100%"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, defineEmits } from "vue";
import { ShoppingCartFull } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import router from "../../router";
import request from "../../api/request";

const route = useRoute();
const state = reactive({
  loginForm: {
    username: "",
    password: "",
  },
});

const loginBtn = () => {
  if (state.loginForm.username == "") {
    ElMessage({
      type: "error",
      message: "账号不能为空",
    });
    return;
  }
  if (state.loginForm.password == "") {
    ElMessage({
      type: "error",
      message: "密码不能为空",
    });
    return;
  }
  request.post("/admin/login", state.loginForm).then((res) => {
    if (res.code == 200) {
     localStorage.setItem("adminInfo",JSON.parse(JSON.stringify(res.data.id)))
     localStorage.setItem("adminNickname",JSON.parse(JSON.stringify(res.data.nickname)))
     localStorage.setItem("adminUsername",JSON.parse(JSON.stringify(res.data.username)))
      ElMessage({
        type: "success",
        message: res.msg,
      });
      router.push("/admin");

    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  });
};

</script>
<style scoped lang="scss"></style>
